<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        CRUD!
    </title>
    <!--在线引入bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/crud.js"></script>
</head>
<body>
    <!--**********************************User列表查询**********************************************-->
    <div class="container">
        <!--标题-->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>

        <!--按钮-->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-info" id="add-user-btn">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    添加
                </button>
                <button type="button" class="btn btn-danger" id="batch-delete-btn">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    批量删除
                </button>
            </div>
        </div>

        <!--表格-->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive table-hover" id="user-table">
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="check-all">
                        </th>
                        <th>编号</th>
                        <th>用户名</th>
                        <th>性别</th>
                        <th>生日</th>
                        <th>余额</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!--分页-->
        <div class="row">
            <!--文字信息-->
            <div class="col-md-6" id="page_info_area"></div>
            <!--分页条-->
            <div class="col-md-6" id="page_nav_area"></div>
        </div>
    </div>


    <!--**********************************新增User模态对话框************************************************-->
    <!-- Modal -->
    <div class="modal fade" id="add-user-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                </div>
                <div class="modal-body" id="add-modal">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="name" name="name" placeholder="用户名">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class=" col-sm-6">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="gender" value="male" checked> 男
                                    </label>
                                    <label>
                                        <input type="radio" name="gender" value="female"> 女
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="date" class="col-sm-2 control-label">生日</label>
                            <div class=" col-sm-6">
                                <input type="date" id="date" name="date">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="money" class="col-sm-2 control-label">余额</label>
                            <div class=" col-sm-6">
                                <input type="number" id="money" name="money">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="add-user-save">确认添加</button>
                </div>
            </div>
        </div>
    </div>

    <!--***********************************修改User模态框*****************************************************-->
    <!-- Modal -->
    <div class="modal fade" id="update-user-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改用户</h4>
                </div>
                <div class="modal-body" id="update-modal">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-6">
                                <p class="form-control-static" id="update-name-static"></p>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control" id="update_password" name="password" placeholder="密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class=" col-sm-6">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="gender" value="male" checked> 男
                                    </label>
                                    <label>
                                        <input type="radio" name="gender" value="female"> 女
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_date" class="col-sm-2 control-label">生日</label>
                            <div class=" col-sm-6">
                                <input type="date" id="update_date" name="date">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="update_money" class="col-sm-2 control-label">余额</label>
                            <div class=" col-sm-6">
                                <input type="number" id="update_money" name="money" readonly>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="update-user-save">确认修改</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>